<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="吉利专题">
    <meta name="Description" content="吉利专题测试">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/home.css">
    <link rel="stylesheet" href="css/video-js.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <!-- <link rel="stylesheet" href="css/video"> -->
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script src="js/video.min.js"></script>
    <script src="js/global.js"></script>
    <script src="js/swiper.min.js"></script>
    <title>吉利专题</title>
    <script>
        // 微信分享函数
        $(function () {
            console.log(document.title);
            //var shareLink = location.href.split('#')[0];
            // get signature
            $.ajax({
                type: "get",
                async: false,
                url: "http://www.chooseauto.com.cn/share/WeChatShare.aspx",
                dataType: "jsonp",
                data: "url=" + encodeURIComponent(window.location.href.split('#')[0]),
                jsonp: "callback",
                success: function (data) {
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: data.appId, // 必填，公众号的唯一标识
                        timestamp: data.timestamp, // 必填，生成签名的时间戳
                        nonceStr: data.nonceStr, // 必填，生成签名的随机串
                        signature: data.signature, // 必填，签名
                        jsApiList: ["updateTimelineShareData", "updateAppMessageShareData",
                            "onMenuShareTimeline", "onMenuShareQQ",
                            "onMenuShareAppMessage", "onMenuShareTimeline",
                            "onMenuShareAppMessage", "onMenuShareQQ",
                            "onMenuShareQZone", "onMenuShareWeibo"
                        ] // 必填，需要使用的JS接口列表
                    });
                }
            });

            // 初始化
            wx.ready(function () {
                var wxInfo = {
                    title: '听最美的公益故事',
                    desc: '测测测测试内容',
                    link: location.href.split('#')[0],
                    imgUrl: 'http://www.chooseauto.com.cn/zt/2020jlzt/img/car-logo.png',
                    type: '', // 分享类型,music、video或link，不填默认为link
                    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                };
                console.log(wxInfo.title, wxInfo.imgUrl, wxInfo.desc);
                wx.updateTimelineShareData(wxInfo);
                wx.updateAppMessageShareData(wxInfo);
                // 旧版API
                wx.onMenuShareTimeline(wxInfo);
                wx.onMenuShareAppMessage(wxInfo);
                wx.onMenuShareQQ(wxInfo);
                wx.onMenuShareQZone(wxInfo);
                wx.onMenuShareWeibo(wxInfo);
            });
        });
    </script>
    <style>
        .video-js {
            display: block;
            /* vertical-align: viddle; */
            box-sizing: border-box;
            color: #fff;
            background-color: #000;
            /* position: relative; */
            padding: 0;
            font-size: 10px;
            line-height: 1;
            font-weight: 400;
            font-style: normal;
            font-family: Arial, Helvetica, sans-serif;
        }

        .video-js .vjs-big-play-button {
            font-size: 3em;
            line-height: 1.5em;
            height: 1.5em;
            width: 1.5em;
            display: block;
            position: absolute;
            top: 50%;
            left: 38%;
            padding: 0;
            cursor: pointer;
            opacity: 1;
            border: .06666em solid #fff;
            background-color: #2b333f;
            background-color: rgba(43, 51, 63, .7);
            -webkit-border-radius: .3em;
            -moz-border-radius: .3em;
            border-radius: 5em;
            -webkit-transition: all .4s;
            -moz-transition: all .4s;
            -ms-transition: all .4s;
            -o-transition: all .4s;
            transition: all .4s;
        }

        html,
        body {
            position: relative;
            height: 100%;
        }

        .swiper-container {
            width: 100%;
            height: 100vh;
            margin: 0 auto;
            max-width: 640px;
            min-width: 320px;
            overflow: auto;
            /* background-image: url(./../img/bg.jpg); */
        }

        .swiper-bg {
            height: 100%;
            overflow: auto;
            background-image: url(img/bg.jpg);
            background-repeat: no-repeat;
            background-size: 100% 108%;
        }

        .swiper-bg-filter {
            height: 100%;
            overflow: auto;
            background-image: url(img/bg-filter.jpg);
            background-repeat: no-repeat;
            background-size: 100% 108%;
        }


        .swiper-button-next,
        .swiper-container-rtl .swiper-button-prev {
            background-image: url();
            /* right: 10px;
            left: auto; */
        }

        .swiper-button-next,
        .swiper-button-prev {
            position: absolute;
            top: 90%;
            /* width: 100%; */
            width: .64rem;
            text-align: center;
            height: 1rem;
            margin-top: -22px;
            z-index: 10;
            cursor: pointer;
            left: 46%;
        }

        .swiper-container .swiper-button-hidden {
            opacity: 0;
            /* display: none; */
        }

        .swiper-button-next.swiper-button-disabled,
        .swiper-button-prev.swiper-button-disabled {
            opacity: .35;
            cursor: auto;
            pointer-events: none;
            display: none;
        }

        /* // 设置固定定位,将bottom设置为0 */
        .footerBox {
            position: fixed;
            bottom: 0;
        }

        /* // 判断iphoneX 将 footerBox 的 padding-bottom 填充到最底部 */
        @supports (bottom: env(safe-area-inset-bottom)) {
            .footerBox {
                padding-bottom: env(safe-area-inset-bottom);
            }
        }
        #slider-wrap{
          display: flex;
          flex-direction: column;    
        }
        #page_wrap{
            flex:1;
        }
        #bottom_wrap{
            height: 1rem;
            line-height: .8rem;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide swiper-bg">
                <header class="clearfix">
                    <img src="img/guan-channel.png">
                    <div></div>
                    <img src="img/car-logo.png">
                </header>
                <div class="index-container">
                    <div class="listen">
                        <img src="img/listen.png" alt="">
                    </div>
                    <div class="slogan-wrap">
                        <div class="slogan-left">
                            <img src="img/slogan-left.png">
                            <div class="topic-wrap">
                                <div class="timely-rain">
                                    <div class="timely-icon">#</div>
                                    <div class="timely-title">吉利吉时雨</div>
                                </div>
                                <div class="camella">高山云雾出好茶</div>
                            </div>
                        </div>
                        <div class="slogan-right">
                            <img src="img/slogan-right.png">
                        </div>
                        <div class="clearfix"></div>
                        <div class="autobots">
                            <span>精准扶贫</span>
                            <span>&nbsp;&nbsp;</span>
                            <span>汽车人一直都在</span>
                        </div>
                    </div>


                </div>

            </div>
            <div class="swiper-slide swiper-bg-filter">
                <!-- 人物 -->
                <div class="page-wrap">
                    <div class="person-indro-wrap">
                        <div class="person-img">
                            <img src="img/person-two.png">
                        </div>
                        <div class="persion-indro">
                            <div>人物简介</div>
                            <div>
                                <span>吉利控股集团</span>
                                <span>公关传播部部长</span>
                            </div>
                        </div>
                    </div>
                    <div class="person-content-wrap">

                    </div>
                    <div class="person-deeds-wrap">
                        <div class="deeds-content">
                            等着被填充等着被填充等着被填充等着被填充
                            等着被填充等着被填充等着被填充等着被填充
                        </div>
                        <div class="leaf">
                            <img src="img/leaf.png" alt="">
                        </div>
                        <div class="clear"></div>
                        <div class="video-wrap">
                            <a onclick="playVideo(name)" href="javascript:void(0)"
                                name="http://img.chooseauto.com.cn/20200519/5ec38bf8c601a.mp4"><img class="poster"
                                    data="img/poster.jpg" src="img/poster.jpg" alt="">
                                <div class="play-btn"><img class="play-img" src="img/play-btn.png"> </div>
                            </a>
                        </div>
                    </div>

                </div>

            </div>
            <div class="swiper-slide swiper-bg-filter">
                <!-- 人物 -->
                <div class="page-wrap">
                    <div class="person-indro-wrap">
                        <div class="person-img">
                            <img src="img/person-one.png">
                        </div>
                        <div class="persion-indro">
                            <div>人物简介</div>
                            <div>
                                <span>吉利控股集团</span>
                                <span>公关传播部部长</span>
                            </div>
                        </div>
                    </div>
                    <div class="person-content-wrap">

                    </div>
                    <div class="person-deeds-wrap">
                        <div class="deeds-content">
                            等着被填充等着被填充等着被填充等着被填充
                            等着被填充等着被填充等着被填充等着被填充
                        </div>
                        <div class="leaf">
                            <img src="img/leaf.png" alt="">
                        </div>
                        <div class="clear"></div>
                        <div class="video-wrap">
                            <a onclick="playVideo(name)" href="javascript:void(0)"
                                name="http://img.chooseauto.com.cn/20200519/5ec38bf8c601a.mp4"><img class="poster"
                                    data="img/poster.jpg" src="img/poster.jpg" alt="">
                                <div class="play-btn"><img class="play-img" src="img/play-btn.png"> </div>
                            </a>
                        </div>
                    </div>

                </div>

            </div>
            <div class="swiper-slide swiper-bg-filter" id="slider-wrap" >
                <!-- <div class="slider-wrap"> -->
                    <!-- 人物 -->
                    <div class="page-wrap" id="page_wrap">
                        <div class="person-indro-wrap">
                            <div class="person-img">
                                <img src="img/person-three.png">
                            </div>
                            <div class="persion-indro">
                                <div>人物简介</div>
                                <div>
                                    <span>吉利控股集团</span>
                                    <span>公关传播部部长</span>
                                </div>
                            </div>
                        </div>
                        <div class="person-content-wrap">

                        </div>
                        <div class="person-deeds-wrap">
                            <div class="deeds-content">
                                等着被填充等着被填充等着被填充等着被填充
                                等着被填充等着被填充等着被填充等着被填充
                            </div>
                            <div class="leaf">
                                <img src="img/leaf.png" alt="">
                            </div>
                            <div class="clear"></div>
                            <div class="video-wrap">
                                <a onclick="playVideo(name)" href="javascript:void(0)"
                                    name="http://img.chooseauto.com.cn/20200519/5ec38bf8c601a.mp4"><img class="poster"
                                        data="img/poster.jpg" src="img/poster.jpg" alt="">
                                    <div class="play-btn"><img class="play-img" src="img/play-btn.png"> </div>
                                </a>
                            </div>
                        </div>

                    </div>
                    <!-- 底部logo -->
                    <div class="bottom-logo" id="bottom_wrap">
                        <img src="./img/logo.png" alt="">
                    </div>
                </div>
            </div>
        <!-- </div> -->
        <div class="arrow-wrap swiper-button-next footerBox">
            <img src="img/arrow-down.png">
        </div>
    </div>
    <!-- 视频弹框 -->
    <div class="mask">
        <div class="close" onclick="closeVideo()">
            <img src="./img/close.png" alt="">
        </div>
        <div class="video-play">
            <video id="video" class="video-js vjs-default-skin" preload="none" width="100%" height="600" poster=""
                data-setup='{}'>
                <source src="" class="build-source" />
                <source src="" type='video/webm' />
                <source src="" type='video/ogg' />

            </video>
        </div>
    </div>
    <script>

    </script>
    <script src="js/index.js"></script>
</body>

</html>